<template>
	<div class="my-sef">
		<navbar></navbar>
		<div class="mysef1">
			<div class="mysef-1">
				<div class="mysef-one">
					<div>
						<p>关注</p>
						<span>
       	     	 	 	523
       	     	 	 </span>
					</div>
					<div class="sx">

					</div>
					<div>
						<p>粉丝</p>
						<span>
       	     	 	 	523
       	     	 	 </span>
					</div>
				</div>
				<div class="mysef-one">
					<div>
						<p>积分</p>
						<span>
       	     	 	 	523
       	     	 	 </span>
					</div>
					<div class="sx">

					</div>
					<div>
						<p>收藏</p>
						<span>
       	     	 	 	523
       	     	 	 </span>
					</div>
				</div>
			</div>
			<div class="mysef-2">
				<div class="mysef-two">
					<p>Sunny大珺</p>
					<span>具体个人介绍文字具体个人介绍文字具体个人介绍具体个人介绍文字具体个人介绍具体个人介绍文字具体个人介绍介绍具体个人介绍文字具体个人介绍介绍具体个人介绍文字具体个人介绍……</span>
				</div>
				<!--v-for="(item,index) in tags"-->
				<div class="mysef-three">
					<a href="javascript:;" v-for="(item,index) in myseflist" v-on:click="getmyList(item.name,index)" v-bind:class="{ 'spans':ide === index }" >{{ item.name }}</a>
				</div>
			</div>
			<div class="details-list">
				<ul>
					<li >
						<div>
							<h5>斗音被新浪微博：啦啦啦啦</h5>

						</div>
						<span>02-24 10:06</span>
						<p> 啦啦啦啦啦了啦啦啦啦啦啦阿里啦啦啦啦啦啦拉拉拉阿拉阿拉拉了拉了拉里啦啦啦啦啦啦拉拉拉阿拉阿拉拉了拉了拉</p>
						<div class="lists">
							<div>
								<img src="../assets/img/1.png" height="18px" width="18px" alt="">
								<a href="javascript:;" class="a-lis">cdc</a>
								<a href="javascript:;" class="a-lis a2">区块链</a>
								<a href="javascript:;" class="a-lis a3">消费链</a>
							</div>
							<div class="lists-r">
								<a href="javascript:;">
									<img src="../assets/img/love1.png" width="14px" height="14px">
									<span>777</span>
								</a>
								<span>|</span>

								<a href="javascript:;">
									<img src="../assets/img/fx.png" width="14px" height="14px">
									<span>777</span>
								</a>
								<span>|</span>
								<a href="javascript:;">
									<img src="../assets/img/pl.png" width="14px" height="14px">
									<span>777</span>
								</a>
							</div>
						</div>
					</li>
					<li>
						<div>
							<h5>斗音被新浪微博：啦啦啦啦</h5>

						</div>
						<span>02-24 10:06</span>
						<p> 啦啦啦啦啦了啦啦啦啦啦啦阿里啦啦啦啦啦啦拉拉拉阿拉阿拉拉了拉了拉里啦啦啦啦啦啦拉拉拉阿拉阿拉拉了拉了拉</p>
						<div class="lists">
							<div>
								<img src="../assets/img/1.png" height="18px" width="18px" alt="">
								<a href="javascript:;" class="a-lis">cdc</a>
								<a href="javascript:;" class="a-lis a2">区块链</a>
								<a href="javascript:;" class="a-lis a3">消费链</a>
							</div>
							<div class="lists-r">
								<a href="javascript:;">
									<img src="../assets/img/love1.png" width="14px" height="14px">
									<span>777</span>
								</a>
								<span>|</span>

								<a href="javascript:;">
									<img src="../assets/img/fx.png" width="14px" height="14px">
									<span>777</span>
								</a>
								<span>|</span>
								<a href="javascript:;">
									<img src="../assets/img/pl.png" width="14px" height="14px">
									<span>777</span>
								</a>
							</div>
						</div>
					</li>
					<li class="lis">
						<div>
							<h5>斗音被新浪微博：啦啦啦啦</h5>

						</div>

						<span>02-24 10:06</span>
						<p> 啦啦啦啦啦了啦啦啦啦啦啦阿里啦啦啦啦啦啦拉拉拉阿拉阿拉拉了拉了拉里啦啦啦啦啦啦拉拉拉阿拉阿拉拉了拉了拉</p>
						<div class="lists">
							<div>
								<img src="../assets/img/1.png" height="18px" width="18px" alt="">
								<a href="#" class="a-lis">cdc</a>
								<a href="#" class="a-lis a2">区块链</a>
								<a href="#" class="a-lis a3">消费链</a>
							</div>
							<div class="lists-r">
								<a href="javascript:;">
									<img src="../assets/img/love1.png" width="14px" height="14px">
									<span>777</span>
								</a>
								<span>|</span>

								<a href="javascript:;">
									<img src="../assets/img/fx.png" width="14px" height="14px">
									<span>777</span>
								</a>
								<span>|</span>
								<a href="javascript:;">
									<img src="../assets/img/pl.png" width="14px" height="14px">
									<span>777</span>
								</a>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="main">
				<textarea id="tex" cols="60" rows="10" maxlength="100" class="texs"></textarea>
				<br>
				<input type="button" value="发表评论" id="ipt">
				<div class="uscomments">
					<div class="uscomments1">
						<div class="personal-img">
					 	     <img src=""/>
					    </div>
					 <div class="uscomments-one">
					 	<span class="usname">
					 		风清扬
					 	</span>
					 	<div>
					 		<a href="javascript:;">
					 			<img src="" width="15px"/>
					 			<span id="">
					 				888
					 			</span>
					 		</a>
					 		<a href="javascript:;">回复</a>
					 		<a href="javascript:;">举报</a>
					 	</div>
					 </div>

					</div>
					 <p>评论内容评论内容评论内容评论内容评论内容评论内容</p>
				</div>
				<div class="uscomments">
					<div class="uscomments1">
						<div class="personal-img">
					 	     <img src=""/>
					    </div>
					 <div class="uscomments-one">
					 	<span class="usname">
					 		风清扬
					 	</span>
					 	<div>
					 		<a href="javascript:;">
					 			<img src="" width="15px"/>
					 			<span id="">
					 				888
					 			</span>
					 		</a>
					 		<a href="javascript:;">回复</a>
					 		<a href="javascript:;">举报</a>
					 	</div>
					 </div>

					</div>
					 <p>评论内容评论内容评论内容评论内容评论内容评论内容</p>
				</div>
				<div class="comments-v" >
					<!--v-on:click="dorpDown"-->
              <img src="../assets/img/Group 22.png" alt="">
            </div>
			</div>
		</div>
		<message></message>
	    <floot></floot>
	</div>
</template>

<script>
	import navbar from '@/components/compon/navbar';
	import floot from '@/components/compon/floot';
	import message from '@/components/compon/message';
	export default {
		components: {
			navbar,
			floot,
			message
		},
		data(){
			return{
				news:'',
				ide:1,
				usId:"",
			   myseflist:[
		       {name:'文章'},{name:'日记'},{name:'我的参与'},{name:'我的收藏'}
		       ]
			}

		},
		munted(){
			this.getmyList(this.ide)
		},
		methods:{
			getmyList (index) {
				this.ide = index
				let params = {
                "condition": {},
                "current": 0,
                "pages": 0,
                "size": 0,
                "total": 0,
                'type': this.ide
        }
        this.$post('/content/queryMyContentList', params).then(response => {
          let r = response.data
          this.news = r.data
          this.usId = this.news.condition.userId
          console.log(this.usId)
          console.log(this.news)
        })
			}
		}
	}
</script>

<style scoped>
	.mysef1 {
		width: 100%;
	}

	.mysef-1 {
		width: 100%;
		height: 110px;
		background-color: #FFD759;
		text-align: center;
	}

	.mysef-1 .mysef-one {
		display: inline-block;
		margin: 60px 100px 0 100px;
	}

	.mysef-one div {
		display: inline-block;
		margin: 0 30px;
	}

	.mysef-one .sx {
		height: 40px;
		border-left: 1px solid #000000;
		opacity: 0.2;
	}

	.mysef-one div span {
		font-size: 22px;

color: #333333;
	}
	.mysef-one div p{

font-size: 14px;
color: #000000;
	}
	.mysef-2 {
		width: 70%;
		height: 200px;
		background-color: #FFFFFF;
		margin: 0 auto;

	}

	.mysef-two {
		width: 72%;
		margin: 0 auto;
		height: 100px;
		padding-top: 30px;
	}
	.mysef-two span{

        font-size: 12px;
        color: #4A4A4A;
	}
	.mysef-two p {
		text-align: center;
		margin-bottom: 20px;
		font-size: 18px;
	}
	.mysef-three {
		text-align: center;
		height: 38px;
		width: 70%;
		margin: 30px auto 0 auto;
	}

	.mysef-three a {
		display: inline-block;
		width: 90px;
		height: 38px;
		margin: 0 35px;
		font-size: 18px;
		font-family: PingFangSC-Medium;
		color: #999999;
	}

	.mysef-three .spans {
		color:#64ABE1 ;
		border-bottom: 2px #64ABE1 solid;
	}

	.details-list {
		width: 70%;
		margin: 0 auto;
		border-top: 1px solid #4290CF;
	}

.my-sef	.details-list ul li {
		border-bottom: 1px #919aa7 solid;
		margin-top: 30px;
		list-style: none;
	}

	.details-list ul .lis {
		border: 0;
	}
	.details-list li p{

font-size: 14px;
color: #465364;
	}
	.details-list li span {
		font-family: PingFangSC-Medium;
font-size: 12px;
color: #AAB1BB
	}

	.details-list li h5 {
		font-size: 18px;
		font-family: PingFangSC-Semibold;
color: #19222E;
	}

	.lists {
		width: 100%;
		margin: 10px 0 18px 0;
	}

	.lists .a-lis {
		width: 60px;
		height: 20px;
		display: inline-block;
		text-align: center;
		line-height: 20px;
		border: 1px #b795f9 solid;
		border-radius: 42px;
		margin: 5px 0;
		color: #b795f9;
		font-size: 14px;
	}

	.lists  .a2 {
		border: 1px #ff8da9 solid;
		color: #ff8da9;
	}

	.lists  .a3 {
		border: 1px #3f9bfe solid;
		color: #3f9bfe;
	}

	.lists div {
		display: inline-block;
	}

	.lists .lists-r {
		float: right;
	}

	.lists-r a {
		margin-left: 5px;
		font-size: 14px;
	}
	.main {
		width: 70%;
		margin: 30px auto;
		background-color: #eff8ff;
		padding-bottom: 40px;
	}

	.main .texs {
		width: 80%;
		margin-left: 10%;
		margin-top: 40px;
	}

	.main #ipt {
		margin-left: 80%;
		color: #f5f5f5;
		background-color: #4290cf;
		border: 1px #4290cf solid;
		width: 90px;
		height: 30px;
		margin-top: 30px;
	}
	.main{
  	position:relative;
  }
  .main .uscomments{
		width: 80%;
		height: 100px;
		padding-top:20px ;
		border-bottom: 1px #4290cf solid;
		margin:0 auto 20px auto;

	}
	.uscomments .personal-img{
		width: 50px;
		height: 50px;
		border-radius: 50%;
		border: 1px #4290cf solid;
		margin: 5px ;
		float: left;
	}
	.uscomments1{
		overflow: hidden;
	}
	.uscomments-one{
		width: 88%;
		margin: 20px 0 28px 70px;
	}
	.uscomments-one div{
		float: right;
	}
	.uscomments-one a{

        font-size: 14px;
        color: #000000;
        margin: 10px;
	}
	.uscomments p{
		margin-left: 50px;
	}
	.main .comments-v{
		position: absolute;
	  height: 50px;
    width: 100%;
    line-height: 50px;
    text-align: center;
    background-color: #eff8ff;
    margin-bottom: -25px;
	}
</style>
